<template>
  <div class="upload-section">
    <h2 class="upload-title">
      <svg
        class="upload-icon"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
        />
      </svg>
      文件上传
    </h2>

    <div
      class="upload-dropzone"
      @drop="handleDrop"
      @dragover.prevent
      @dragenter.prevent
    >
      <input
        ref="fileInput"
        type="file"
        multiple
        style="display: none;"
        @change="handleFileSelect"
      />

      <svg
        class="upload-large-icon"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
        />
      </svg>

      <p class="dropzone-text">拖拽文件到此处或</p>
      <button class="upload-button" @click="$refs.fileInput.click()">
        选择文件
      </button>
    </div>

    <!-- Selected Files Display -->
    <div v-if="selectedFiles.length > 0" class="selected-files">
      <h3 class="selected-files-title">选中的文件:</h3>
      <div class="selected-files-list">
        <div
          v-for="(file, index) in selectedFiles"
          :key="index"
          class="selected-file-item"
        >
          <div class="file-info">
            <svg class="file-icon" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="file-details"
              >{{ file.name }} ({{ formatFileSize(file.size) }})</span
            >
          </div>
          <button
            class="remove-file-button"
            @click="removeSelectedFile(index)"
          >
            <svg class="remove-icon" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <button
        :disabled="uploading"
        class="upload-start-button"
        @click="uploadFiles"
      >
        {{ uploading ? "上传中..." : "开始上传" }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// Props and emits
const emit = defineEmits(['upload-success', 'upload-error']);

// Reactive data
const selectedFiles = ref([]);
const uploading = ref(false);
const fileInput = ref(null);

// Format file size
const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// Handle file selection
const handleFileSelect = (event) => {
  const files = Array.from(event.target.files);
  selectedFiles.value.push(...files);
};

// Handle drag and drop
const handleDrop = (event) => {
  event.preventDefault();
  const files = Array.from(event.dataTransfer.files);
  selectedFiles.value.push(...files);
};

// Remove selected file
const removeSelectedFile = (index) => {
  selectedFiles.value.splice(index, 1);
};

// Upload files
const uploadFiles = async () => {
  if (selectedFiles.value.length === 0) return;

  uploading.value = true;
  try {
    const formData = new FormData();

    selectedFiles.value.forEach((file) => {
      formData.append("files", file);
    });

    const response = await $fetch("/api/lan-share", {
      method: "POST",
      body: formData,
    });

    console.log(response);

    if (response.success) {
      emit('upload-success', `成功上传 ${response.files.length} 个文件`);
      selectedFiles.value = [];
      if (fileInput.value) {
        fileInput.value.value = "";
      }
    }
  } catch (error) {
    console.error("Upload error:", error);
    emit('upload-error', "上传失败: " + (error.data?.message || error.message));
  } finally {
    uploading.value = false;
  }
};
</script>

<style scoped>
.upload-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.upload-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

.upload-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: #007aff;
}

.upload-dropzone {
  border: 2px dashed rgba(0, 122, 255, 0.3);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  transition: all 0.2s ease;
  background: rgba(0, 122, 255, 0.02);
}

.upload-dropzone:hover {
  border-color: rgba(0, 122, 255, 0.6);
  background: rgba(0, 122, 255, 0.05);
}

.upload-button {
  background: #007aff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
}

.upload-button:hover {
  background: #0056cc;
  transform: translateY(-1px);
}

.upload-start-button {
  margin-top: 16px;
  background: #34c759;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.upload-start-button:hover:not(:disabled) {
  background: #28a745;
  transform: translateY(-1px);
}

.upload-start-button:disabled {
  background: #d1d1d6;
  color: #8e8e93;
  cursor: not-allowed;
  transform: none;
}

.selected-files {
  margin-top: 20px;
}

.selected-files-title {
  font-weight: 500;
  margin-bottom: 12px;
  color: #1d1d1f;
  font-size: 15px;
}

.selected-files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.02);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.file-info {
  display: flex;
  align-items: center;
}

.file-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #6e6e73;
}

.file-details {
  font-size: 14px;
  color: #1d1d1f;
}

.remove-file-button {
  background: none;
  border: none;
  color: #ff3b30;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.remove-file-button:hover {
  background: rgba(255, 59, 48, 0.1);
}

.remove-icon {
  width: 16px;
  height: 16px;
}

.dropzone-text {
  color: #6e6e73;
  margin-bottom: 8px;
  font-size: 15px;
}

.upload-large-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: #c7c7cc;
}
</style> 